<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <!--  员工档案-->
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 Element UI 样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/theme-chalk/index.css">
    <!-- 引入 Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入 Element UI 脚本文件 -->
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/index.js"></script>
    <!-- 引入 axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 引入 导航栏css 需要通过服务器请求-->
    <link rel="stylesheet"  href="/css/nav.css" />
    <style>
        *{
            padding: 0;
            margin: 0;

        }
        .sea {
            margin: 20px 10px 0px 22px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        body::-webkit-scrollbar{ /* 隐藏滚动条 */
            display: none; /* Chrome, Safari, and Opera */
        }
        /*分页*/
        .block {
            padding: 10px;
            background: #fff;
            border: none;
            text-align: right;
            width: 100%;
            height: 30px;
            z-index: 2;
            position: fixed;
            bottom: 0;
            right: 0;
            box-shadow:  0px 0px 10px 1px #a0a0a0;
        }

    </style>
</head>
<body>
<div id="app">
    <div  th:replace="nav :: nav"></div>
    <!-- 水印层 -->
    <div class="watermark">{{userNowName}} {{user}}</div>
    <div v-loading="loading" element-loading-text="拼命加载中"  element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
       <div style="margin-top: 70px;"></div>
            <div class="sea">
                <!--     面包屑导航 -->
                <div>
                    <el-breadcrumb  separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item><a th:href="@{/}">首页</a></el-breadcrumb-item>
                        <el-breadcrumb-item>档案管理</el-breadcrumb-item>
                        <el-breadcrumb-item>员工档案</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <!-- 新增、批量删除、重置 -->
                <div>
                    <el-row v-if="!userRole2">
                        <el-button size="small" type="primary" icon="el-icon-circle-plus-outline" @click="dialogFormVisible = true">新增</el-button>
                        <el-button size="small" type="danger" icon="el-icon-remove-outline" @click="delBatch()">批量删除</el-button>
                        <el-button size="small" type="warning" icon="el-icon-refresh" @click="reload()">重置</el-button>
                    </el-row>
                </div>
            </div>
            <!-- stripe属性可以创建带斑马纹的表格； border表格边框 -->
            <el-table size="mini" :data="originalData" stripe  style="width: 100%;  margin-bottom: 50px;"  @selection-change="handleSelectionChange">
                <!--  序号-->
                <el-table-column type="index" width="40" align="center"></el-table-column>
                <!-- #选中 -->
                <el-table-column type="selection" width="45" align="center"></el-table-column>
                <!-- 员工编号 -->
                <el-table-column prop="id" label="员工编号" width="90"></el-table-column>
                <!-- 员工姓名 -->
                <el-table-column prop="z_name" label="员工姓名"   width="90"></el-table-column>
                <!-- 手机号码 -->
                <el-table-column prop="phone" label="手机号码" width="132">
                    <template slot-scope="scope">
                        <i class="el-icon-mobile-phone"></i><span v-if="scope.row.phone" style="margin-left: 5px">{{ scope.row.phone }}</span>
                        <span v-else>--</span>
                    </template>
                </el-table-column>
                <!-- 住址 -->
                <el-table-column prop="address" label="住址" width="238">
                    <template slot-scope="scope">
                        <i class="el-icon-location-outline"></i>
                        <span v-if="scope.row.address" style="margin-left: 5px">{{ scope.row.address }}</span>
                        <span v-else>--</span>
                    </template>
                </el-table-column>
                <!-- 入职日期 -->
                <el-table-column prop="joined_date" label="入职日期" sortable width="155" align="left">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i><span style="margin-left: 5px">{{ scope.row.joined_date }}</span>
                    </template>
                </el-table-column>
                <!-- 所属部门 -->
                <el-table-column  label="所属部门" width="130"
                                 :filters="[{ text: '总裁办', value: '总裁办' }, { text: '战略规划部', value: '战略规划部' }, { text: '人力资源中心', value: '人力资源中心' }, { text: '法务部', value: '法务部' },{ text: 'IT部', value: 'IT部' }, { text: '集团供应链', value: '集团供应链' },  { text: '国际营销系统', value: '国际营销系统' }, { text: '国内营销系统', value: '国内营销系统' },{ text: 'POCT系统', value: 'POCT系统' }]"
                                 :filter-method="filterDepartment"
                                 filter-placement="bottom-end">
                            <template slot-scope="scope">
                                <span v-if="scope.row.department">{{ scope.row.department }}</span>
                                <span v-else>--</span>
                            </template>
                </el-table-column>
                <!-- 职位 -->
                <el-table-column width="110" prop="position" label="职位"
                        :filters="[{ text: '高管', value: '高管' }, { text: '中管', value: '中管' }, { text: '普工', value: '普工' }, { text: '工程师', value: '工程师' }]"
                        :filter-method="filterPosition"
                        filter-placement="bottom-end">
                    <template slot-scope="scope">
                        <el-tag size="mini" v-if="scope.row.position" :type="getTagType(scope.row.position)" disable-transitions>{{ scope.row.position }}</el-tag>
                        <span v-else>--</span>
                    </template>

                </el-table-column>
                <!-- 建档日期 -->
                <el-table-column prop="create_time" label="建档日期" sortable width="185" align="left">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i><span style="margin-left: 5px">{{ scope.row.create_time }}</span>
                    </template>
                </el-table-column>
                <!-- 操作 -->
                <el-table-column align="right"  >
                    <template slot="header" slot-scope="scope">
                            <el-input v-if="!userRole2" placeholder="请输入内容" v-model="searchQuery" class="input-with-select" size="mini" clearable>
                                <el-select v-model="value" slot="prepend" size="mini" style="width:70px">
                                    <el-option v-for="item in options"  :label="item.label" :value="item.value"></el-option>
                                </el-select>
                                <el-button slot="append" size="mini" icon="el-icon-search" @click="searchList(scope)"></el-button>
                            </el-input>
                    </template>
                    <template slot-scope="scope" >
                        <el-button v-if="!userRole2 && scope.row.z_name !== '超级管理员'" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
                        <el-button v-if="!userRole2 && scope.row.z_name !== '超级管理员'" size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除 <i class="el-icon-delete"></i></el-button>
                        <!-- 信息 弹出框-->
                        <el-popover placement="left" width="750" trigger="click">
                            <el-descriptions title="员工信息" :column="3"  border>
                                <el-descriptions-item> <template slot="label">员工编号</template> {{scope.row.id}} </el-descriptions-item>
                                <el-descriptions-item> <template slot="label">员工姓名</template> {{scope.row.z_name}} </el-descriptions-item>
                                <el-descriptions-item> <template slot="label">手机号</template> {{scope.row.phone}} </el-descriptions-item>
                                <el-descriptions-item> <template slot="label">账号</template> {{scope.row.username}} </el-descriptions-item>
                                <el-descriptions-item> <template slot="label">密码</template> {{scope.row.password}} </el-descriptions-item>
                                <el-descriptions-item> <template slot="label">账户角色</template> <el-tag size="small">{{scope.row.role}}</el-tag> </el-descriptions-item>
                                <el-descriptions-item> <template slot="label">入职日期</template> {{scope.row.joined_date}} </el-descriptions-item>
                                <el-descriptions-item> <template slot="label">所属部门</template> {{scope.row.department}} </el-descriptions-item>
                                <el-descriptions-item> <template slot="label">职位</template> {{scope.row.position}} </el-descriptions-item>
                                <el-descriptions-item> <template slot="label">建档日期</template> {{scope.row.create_time}} </el-descriptions-item>
                                <el-descriptions-item> <template slot="label">住址</template>{{scope.row.address}} </el-descriptions-item>
                            </el-descriptions>
                            <el-button style="margin-left: 10px" size="mini" type="success" slot="reference">查看 <i class="el-icon-view"></i></el-button>
                        </el-popover>

                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="block">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[15,30,50,100,200]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
            </div>
        <!--  新增 对话框-->
        <el-dialog title="新增员工档案" :visible.sync="dialogFormVisible"  width="60%" :close-on-click-modal="false" >
            <el-form :model="form" label-width="120px" size="small" :inline="true"  :rules="rules" ref="saveForm">
                <el-form-item label="员工姓名" prop="z_name">
                    <el-input v-model="form.z_name" autocomplete="off" :style="{ width: '250px' }" :required="true"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="phone">
                    <el-input v-model="form.phone" autocomplete="off" :style="{ width: '250px' }"></el-input>
                </el-form-item>
                <el-form-item label="账号" prop="username">
                    <el-input v-model="form.username" autocomplete="off" :style="{ width: '250px' }"><template  slot="append">@pm.com</template></el-input>
                </el-form-item>
                <el-form-item label="初始密码" prop="password">
                    <el-input v-model="form.password" autocomplete="off" :style="{ width: '250px' }"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="form.address" autocomplete="off" :style="{ width: '635px' }"></el-input>
                </el-form-item>
                <el-form-item label="入职时间" prop="joined_date">
                    <el-date-picker :style="{ width: '250px' }" v-model="form.joined_date"  autocomplete="off" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="所属部门" prop="department" >
                    <el-select v-model="form.department" placeholder="请选择所属部门" :style="{ width: '250px' }">
                        <el-option v-for="item in departments"  :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="职位" prop="position">
                    <el-select v-model="form.position" placeholder="请选择职位" :style="{ width: '250px' }">
                        <el-option v-for="item in positions"  :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="账户角色" prop="role">
                    <el-select v-model="form.role" placeholder="请选择账户角色" :style="{ width: '250px' }" >
                        <el-option v-for="item in roles"  :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save()">确 定</el-button>
                <el-button @click="$refs.saveForm.resetFields()">重置</el-button>
            </div>
        </el-dialog>
        <!--  编辑 对话框-->
        <el-dialog title="修改员工档案" :visible.sync="editDialogVisible"  width="60%" :close-on-click-modal="false" >
            <el-form :model="editedEmployee" label-width="120px" size="small" :inline="true"  :rules="rules" ref="editedFrom">
                <el-form-item label="员工姓名" prop="z_name">
                    <el-input v-model="editedEmployee.z_name" autocomplete="off" :style="{ width: '250px' }" :required="true"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="phone">
                    <el-input v-model="editedEmployee.phone" autocomplete="off" :style="{ width: '250px' }"></el-input>
                </el-form-item>
                <el-form-item label="账号" prop="username">
                    <el-input v-model="editedEmployee.username" autocomplete="off" :style="{ width: '250px' }"><template  slot="append">@demo.com</template></el-input>
                </el-form-item>
                <el-form-item label="初始密码" prop="password">
                    <el-input v-model="editedEmployee.password" autocomplete="off" :style="{ width: '250px' }" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="editedEmployee.address" autocomplete="off" :style="{ width: '635px' }"></el-input>
                </el-form-item>
                <el-form-item label="入职时间" prop="joined_date">
                    <el-date-picker :style="{ width: '250px' }" v-model="editedEmployee.joined_date" value-format="yyyy-MM-dd" autocomplete="off" type="date" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="所属部门" prop="department" >
                    <el-select v-model="editedEmployee.department" placeholder="请选择所属部门" :style="{ width: '250px' }">
                        <el-option v-for="item in departments"  :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="职位" prop="position">
                    <el-select v-model="editedEmployee.position" placeholder="请选择职位" :style="{ width: '250px' }">
                        <el-option v-for="item in positions"  :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="账户角色" prop="role">
                    <el-select v-model="editedEmployee.role" placeholder="请选择账户角色" :style="{ width: '250px' }" >
                        <el-option v-for="item in roles"  :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="edit()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            user: JSON.parse(localStorage.getItem("user")),
            userRole1:'',//	administrator的权限,boolen
            userRole2:'',//user的 boolen
            userNowdata:'', // 当前用户的所有数据
            activeIndex:'1-1',
            userNowName:'',

            loading: true, //加载动画
            originalData: [], // 当前页面数据
            searchQuery: "", //搜索内容
            z_name: "", //默认查询名字为空
            id: "",
            address: "",
            createTime: "",
            total: 0, //总条数
            pageNum: 1, //第几页
            pageSize: 15, //每页几条数据
            options: [ // 选择什么查询
                {
                    value: "1",
                    label: "姓名"
                },
                {
                    value: "2",
                    label: "编号"
                },
                {
                    value: "3",
                    label: "住址"
                },
                {
                    value: "4",
                    label: "日期"
                }
            ],
            value: "1", //默认姓名查询
            dialogFormVisible: false, //默认不展示新增对话框
            roles:[
                {
                    value: "admin",
                    label: "管理员"
                },
                {
                    value: "user",
                    label: "普通用户"
                }
            ],
            positions:[
                {
                    value: "高管",
                    label: "高管"
                },
                {
                    value: "中管",
                    label: "中管"
                },
                {
                    value: "工程师",
                    label: "工程师"
                },
                {
                    value: "普工",
                    label: "普工"
                }
            ],
            departments:[
                {
                    value: "总裁办",
                    label: "总裁办"
                },
                {
                    value: "战略规划部",
                    label: "战略规划部"
                },
                {
                    value: "人力资源中心",
                    label: "人力资源中心"
                },
                {
                    value: "法务部",
                    label: "法务部"
                },
                {
                    value: "IT部",
                    label: "IT部"
                },
                {
                    value: "集团供应链",
                    label: "集团供应链"
                },
                {
                    value: "国际营销系统",
                    label: "国际营销系统"
                },
                {
                    value: "国内营销系统",
                    label: "国内营销系统"
                },
                {
                    value: "POCT系统",
                    label: "POCT系统"
                },
            ],
            form: {
                z_name: "",
                username: "",
                password: "",
                phone: "",
                address: "",
                joined_date: "",
                department: "",
                position: "",
                role: "",
            },
            rules: {
                z_name: [{required: true, message: '请输入员工姓名', trigger: 'blur'}],
                phone: [{pattern: /^\d{11}$/, message: '请输入正确的11位手机号码', trigger: 'blur'}],
                username: [{required: true, message: '请输入账号', trigger: 'blur'},
                    {pattern: /^[a-z0-9]+$/, message: ' ', trigger: 'blur'}],
                password: [{required: true, message: '请输入初始密码', trigger: 'blur'}],
                role: [{required: true, message: '请选择账户角色', trigger: 'blur'}],
            },
            editDialogVisible: false,//默认不展示编辑对话框
            editedEmployee:{},
            multipleSelection: [],//表格选择项的数组,
            logData : {// 日志信息 (公用)
                operator: '',
                logType: '',
                recordTime: '',
                operatorIP: "192.168.2.21",
                requestType: '',
                requestInterface: '',
                requestParameters: '',
                responseType: '',
                resdata:'',
                error:''
            },
        },
        created() {
            this.nowDate();
            this.getUserRole(); // 加载用户权限
            // 模拟加载动画
            setTimeout(() => {
                this.loading = false;
                this.getUserList();
            }, 500); // 1秒后执行
        },
        methods: {
            // 账号退出(通用）
            logoutButton(){
               axios.get("/user/logout")
            },
            // 用户权限（通用）
            getUserRole() {
                axios.get("/user/now?username=" + this.user)
                    .then(res => {
                        this.userRole1 = (res.data.UserNowdata[0].role === 'administrator')
                        this.userRole2 = (res.data.UserNowdata[0].role === 'user')
                        this.userNowdata = res.data.UserNowdata
                        this.userNowName = this.userNowdata[0].z_name;
                        // console.log(res.data.UserNowdata[0].role)
                        // console.log(this.userNowdata)
                        // 访问请求的相关信息,写进日志
                        this.getLog(res);
                        axios.post('/log', {  ...this.logData, logType: '操作日志'} )
                    });
            },
            // 请求用户分页列表数据
            getUserList() {
                if (this.userRole2) { // 当前为 用户权限
                    this.originalData = this.userNowdata;
                    this.total = this.originalData.length;
                } else { // 当前为 管理员权限
                    axios.get("/user/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&z_name=" + this.z_name + "&id=" + this.id + "&address=" + this.address + "&create_time=" + this.createTime+"&username=")
                        .then(res => {
                            this.originalData = res.data.Userdata;
                            this.total = res.data.total  ;
                            // 访问请求的相关信息,写进日志
                            this.getLog(res);
                            axios.post('/log', {  ...this.logData, logType: '操作日志'} )
                        });
                }
            },
            // 筛选
            filterPosition(value, row) {
                return row.position === value;
            },
            filterDepartment(value,row){
                return row.department === value;
            },
            // 不同颜色标签
            getTagType(position){
                const  positionMap ={
                    '高管': 'primary',
                    '中管': 'success',
                    '普工': 'info',
                    '工程师': 'danger'
                };
                return positionMap[position] || '';// 如果没有匹配的，默认为空字符串
            },
            // 搜索
            searchList(scope) {
                this.pageNum = 1; //不先把页面等于1的话，有些会搜索不到
                // 将所有条件重置为空
                this.id = "";
                this.address = "";
                this.createTime = "";
                this.z_name = "";
                // 定义一个映射对象，将 this.value 映射到对应的属性
                const propertyMap = {
                    2: "id",
                    3: "address",
                    4: "createTime",
                    default: "z_name"
                };
                // 根据 this.value 的值获取对应的属性名,  在这里如果 propertyMap[this.value] 为真（存在且非空），就使用它，否则使用 propertyMap.default。
                const propertyName = propertyMap[this.value] || propertyMap.default;
                this[propertyName] = this.searchQuery;
                console.log("搜索" + this[propertyName]);
                this.getUserList();
            },
            // 分页
            handleSizeChange(val) {
                this.pageSize = val;
                console.log(`每页 ${this.pageSize} 条`);
                this.getUserList();
            },
            handleCurrentChange(val) {
                this.pageNum = val;
                console.log(`当前页: ${val}`);
                this.getUserList();
            },
            //重置页面
            reload(){
                 window.location.reload()
            },
            // 设置入职日期为当前日期
            nowDate(){
                let nowDate = new Date(); // 获取当前日期
                let year = nowDate.getFullYear(); // 年
                let month = String(nowDate.getMonth() + 1).padStart(2, '0'); // 月份 补零
                let day = String(nowDate.getDate()).padStart(2, '0'); //日  补零
                this.form.joined_date = `${year}-${month}-${day}`; // 设置默认日期字符串
            },
            //新增 创建
            save() {
                this.$refs.saveForm.validate((valid) => {
                    let newUsername;
                    this.form.username ? newUsername = this.form.username + '@pm.com' : '';
                    if (valid) { // 判断定义的规则是否满足
                        // 原本： axios.post('/user', this.form)
                        // 现在：在发送到后端之前，将账号添加上后缀。    ...this.form 复制对象,在新对象中修改了 username 字段的值
                        axios.post('/user', {  ...this.form, username: newUsername} )
                            .then(res => {
                                this.$message({message: '档案创建成功！', type: 'success'});
                                console.log("新增成功", this.form);
                                this.dialogFormVisible=false;
                                this.getUserList(); //刷新列表
                                // 访问请求的相关信息,写进日志
                                this.getLog(res);
                                axios.post('/log', {  ...this.logData, logType: '操作日志'} )
                            }).catch(error => {
                            // 访问请求的相关信息,写进日志
                            this.getLog(error);
                            axios.post('/log', {  ...this.logData, logType: '错误日志'} )
                            console.log(this.logData);
                            this.$message.error('员工姓名重复！');
                            console.error('error:', error);
                        });
                    }
                });
            },
            // 编辑按钮
            handleEdit(index, row) {
               // console.log(index, row);
                this.editedEmployee = { ...(row) };
                if(row.username){
                    this.editedEmployee.username = row.username.replace('@pm.com', '');
                }
                this.editDialogVisible = true;
            },
            // 确定编辑修改
            edit(){
               // console.log('保存编辑后的员工信息:', this.editedEmployee);
                this.$refs.editedFrom.validate((valid) => {
                    let newUsername;
                    this.editedEmployee.username ? newUsername = this.editedEmployee.username + '@pm.com' : '';
                    if (valid) {
                        axios.post('/user', {  ...this.editedEmployee, username: newUsername} )
                            .then(res => {
                                this.$message({message: '档案修改成功！', type: 'success'});
                             //   console.log("修改成功", this.editedEmployee);
                                this.editDialogVisible=false;
                                this.getUserList(); //刷新列表
                                // 访问请求的相关信息,写进日志
                                this.getLog(res);
                                axios.post('/log', {  ...this.logData, logType: '操作日志'} )
                            }).catch(error => {
                            this.$message.error('档案修改失败！');
                            console.error('error:', error);
                            // 访问请求的相关信息,写进日志
                            this.getLog(error);
                            axios.post('/log', {  ...this.logData, logType: '错误日志'} )
                        });
                    }
                });
            },
            // 删除
            handleDelete(index, row) {
                this.$confirm('此操作将永久删除【'+row.z_name+'】的档案, 是否继续?', '删除', { confirmButtonText: '确定',  cancelButtonText: '取消',  type: 'warning'
                }).then(() => {
                    // console.log("确定");
                    axios.delete('/user/' + row.id).then(res => {
                        this.$message({message: '档案删除成功！', type: 'success'});
                        this.getUserList();
                        // 访问请求的相关信息,写进日志
                        this.getLog(res);
                        axios.post('/log', {  ...this.logData, logType: '操作日志'} )
                    }).catch(error => {
                        this.$message.error('档案删除失败！');
                        console.error('error:', error);
                        // 访问请求的相关信息,写进日志
                        this.getLog(error);
                        axios.post('/log', {  ...this.logData, logType: '错误日志'} )
                    })
                }).catch(() => {
                    //   console.log("取消");
                });
            },
            // 当表格选择项发生变化时会触发该事件
            handleSelectionChange(val) {
                this.multipleSelection =val
               // console.log(this.multipleSelection)
            },
            // 批量删除
            delBatch(){
                //扁平化处理，只留下需要的id。map 函数，从一个对象数组中提取 id 属性，以创建一个新的只包含 id 的数组
                let ids =this.multipleSelection.map(v => v.id)  // [{},{},{}] => [1,2,3]
               // console.log(ids)
                let name = this.multipleSelection.map(v => v.z_name)
                this.$confirm('此操作将永久删除【'+name+'】的档案, 是否继续?', '删除', { confirmButtonText: '确定',  cancelButtonText: '取消',  type: 'warning'
                }).then(() => {
                    // console.log("确定");
                    axios.post('/user/del/batch' , ids).then(res => {
                        this.$message({message: '批量删除档案成功！', type: 'success'});
                        this.getUserList();
                        // 访问请求的相关信息,写进日志
                        this.getLog(res);
                        axios.post('/log', {  ...this.logData, logType: '操作日志'} )
                    }).catch(error => {
                        if(ids.length >0){
                            this.$message.error('批量删除档案失败！');
                        }else{
                            this.$message({message: '尚未选择删除的档案！', type: 'warning'});
                        }
                        console.error('error:', error);
                        // 访问请求的相关信息,写进日志
                        this.getLog(error);
                        axios.post('/log', {  ...this.logData, logType: '错误日志'} )
                    })
                })
            },
            // 从接口的res 获取日志 (公用）
            getLog(res){
                this.logData.operator = this.user, // 操作者
                this.logData.recordTime = new Date().toLocaleString(), // 记录时间
             // this.logData.operatorIP = 操作者ip
                this.logData.requestType = res.config.method; // 请求类型
                this.logData.requestInterface = '/api'+ res.config.url;// 请求URL
                this.logData.requestParameters = res.config.data; // 请求参数
                if (res.headers && res.headers['content-type']) {
                    this.logData.responseType = res.headers['content-type'];// 实体主体的媒体类型
                }else{
                    this.logData.responseType=''
                }
                if(res.data){ // 响应参数
                    this.logData.resdata = JSON.stringify(res.data).substring(0, 5000);// 数组转成字符串，最大写入量5000
                    this.logData.error=''
                }else{ // 错误信息
                    this.logData.resdata =''
                   this.logData.error =  JSON.stringify(res).substring(0, 5000)
                }
            },
        },

    });
</script>
</body>
</html>